<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Solar Exploration</title>
    <meta name="description" content="Exploration the solar system, have fun!">

    <meta name="viewport" content="width = device-width, initial-scale =1.0, maximum-scale = 1.0, user-scalable = no">
    <link rel='icon' href='images/logo/logo.ico' type=‘image/x-ico’>

    <link rel="stylesheet" href="css/index.css">
    <script src="js/lib/jquery.min.js"></script>
    <script src="js/lib/three.min.js"></script>
    <script src="js/lib/tween.min.js"></script>
    <script src="js/config/solarConfig.js"></script>
    <script src="js/utils/utils.js"></script>
    <script src="js/utils/universeUtils.js"></script>
    <script src="js/utils/tweenUtils.js"></script>
    <script src="js/utils/eventManager.js"></script>
    <script src="js/model/EarthSceneController.js"></script>
    <script src="js/model/SolarSystemSceneController.js"></script>
    <script src="js/index.js"></script>
    <link href="css/typing.css">
    <script src="js/lib/typing.min.js"></script>
    <script src="js/config/transitionConfig.js"></script>

</head>
<body>
<img id="backLogo" src="images/logo/logo.png">
<canvas id="sceneArea"></canvas>

<div id="infoBoard">

    <div id="infoArea">

        <div id="infoTitle"></div>

        <div id="infoDetail">
            <div id="flag">
                <img src="">
                <div>
                    <div id="latitude"></div>
                    <div id="longitude"></div>
                </div>
            </div>

            <div id="amount">
                <div id="total"></div>
                <div id="coal"></div>
                <div id="oil"></div>
                <div id="gas"></div>
            </div>
        </div>
    </div>

    <img id="closeBoard" src="images/closeButton/close.png">

</div>

<div id="mercuryBoard">
    <h2>Mercury</h2>

    <p><span>Diameter:</span>3031 miles (4,878 km)</p>
    <p><span>Mass:</span>3.3011×10^23kg (0.055 Earths)</p>
    <div>
        <h3>Composition by volume:</h3>
        <p><span>42%</span><span>molecular oxygen</span></p>
        <p><span>29%</span><span>sodium</span></p>
        <p><span>22%</span><span>hydrogen</span></p>
        <p><span>6.0%</span><span>helium</span></p>
        <p><span>0.5%</span><span>potassium</span></p>
        <p><span>0.5%</span><span>carbon monoxide</span></p>
        <p>Trace amounts of argon, nitrogen, carbon dioxide, water vapor, xenon, and neon</p>
    </div>
    <div></div>
    <!--<p><span>Cost:</span>909,300 Credits</p>-->
    <img src="images/closeButton/mercury.png">
</div>

<div id="venusBoard">

    <h2>Venus</h2>

    <p><span>Diameter:</span>7,521 miles (12,104 km)</p>
    <p><span>Mass:</span>4.8675x️10^24kg (0.815 Earths)</p>
    <div>
        <h3>Composition by volume:</h3>
        <p><span>96.5%</span><span>carbon dioxide</span></p>
        <p><span>3.5%</span><span>nitrogen</span></p>
        <p><span>0.015%</span><span>sulfur dioxide</span></p>
        <p><span>0.007%</span><span>argon</span></p>
        <p><span>0.002%</span><span>water vapour</span></p>
        <p><span>0.0017%</span><span>carbon monoxide</span></p>
        <p>Trace amounts of carbonyl sulfide, hydrogen chloride, hydrogen fluoride</p>
    </div>
    <div></div>
    <!--<p><span>Cost:</span>2,256,300 Credits</p>-->
    <img src="images/closeButton/venus.png">
</div>

<div id="marsBoard">
    <h2>Mars</h2>

    <p><span>Diameter:</span>4,217 miles (6,787 km)</p>
    <p><span>Mass:</span>6.4171×10^23kg (0.107 Earths)</p>
    <div>
        <h3>Composition by volume:</h3>
        <p><span>95.97%</span><span>carbon dioxide</span></p>
        <p><span>1.93%</span><span>argon</span></p>
        <p><span>1.89%</span><span>nitrogen</span></p>
        <p><span>0.146%</span><span>oxygen</span></p>
        <p><span>0.0557%</span><span>carbon monoxide</span></p>
        <p><span>0.0066%</span><span>water vapour</span></p>
        <p>Trace amounts of carbonyl sulfide, hydrogen chloride, hydrogen fluoride</p>
    </div>
    <div></div>
    <!--<p><span>Cost:</span>1,165,100 Credits</p>-->
    <img src="images/closeButton/mars.png">
</div>

<div id="jupiterBoard">
    <h2>Jupiter</h2>

    <p><span>Diameter:</span>86,881 miles (139,822 km)</p>
    <p><span>Mass:</span>1.8982×10^27kg (317.8 Earths)</p>
    <div>
        <h3>Composition by volume:</h3>
        <p><span>89.4%</span><span>hydrogen</span></p>
        <p><span>10.2%</span><span>helium</span></p>
        <p><span>0.3%</span><span>methane</span></p>
        <p><span>0.026%</span><span>ammonia</span></p>
        <p><span>0.0028%</span><span>hydrogen deuteride</span></p>
        <p><span>0.0006%</span><span>ethane</span></p>
        <p>Trace amounts of carbonyl sulfide, hydrogen chloride, hydrogen fluoride</p>
    </div>
    <div></div>
    <!--<p><span>Cost:</span>26,064,300 Credits</p>-->
    <img src="images/closeButton/jupiter.png">
</div>

<div id="saturnBoard">
    <h2>Saturn</h2>

    <p><span>Diameter:</span>74,900 miles (120,500 km)</p>
    <p><span>Mass:</span>5.6834×10^26kg (95.159 Earths)</p>
    <div>
        <h3>Composition by volume:</h3>
        <p><span>96.3%</span><span>hydrogen</span></p>
        <p><span>3.24%</span><span>helium</span></p>
        <p><span>0.45%</span><span>methane</span></p>
        <p><span>0.0125%</span><span>ammonia</span></p>
        <p><span>0.0110%</span><span>hydrogen deuteride</span></p>
        <p><span>0.0007%</span><span>carbon monoxide</span></p>
        <p>Trace amounts of carbonyl sulfide, hydrogen chloride, hydrogen fluoride</p>
    </div>
    <div></div>
    <!--<p><span>Cost:</span>22,470,000 Credits</p>-->
    <img src="images/closeButton/saturn.png">
</div>

<div id="uranusBoard">
    <h2>Uranus</h2>

    <p><span>Diameter:</span>31,763 miles (51,120 km)</p>
    <p><span>Mass:</span>8.68×10^25kg (14.536 Earths)</p>
    <div>
        <h3>Composition by volume:</h3>
        <p><span>82.5%</span><span>hydrogen</span></p>
        <p><span>15%</span><span>helium</span></p>
        <p><span>2.3%</span><span>methane</span></p>
        <p><span>0.009%</span><span>hydrogen deuteride</span></p>
        <p><span>0.002%</span><span>water vapour</span></p>
        <p><span>0.0017%</span><span>carbon monoxide</span></p>
        <p>Trace amounts of carbonyl sulfide, hydrogen chloride, hydrogen fluoride</p>
    </div>
    <div></div>
    <p><span> </span></p>
    <img src="images/closeButton/uranus.png">
</div>

<div id="neptuneBoard">
    <h2>Neptune</h2>

    <p><span>Diameter:</span>30,775 miles (49,530 km)</p>
    <p><span>Mass:</span>1.0243×10^26kg (17.147 Earths)</p>
    <div>
        <h3>Composition by volume:</h3>
        <p><span>80%</span><span>hydrogen</span></p>
        <p><span>19%</span><span>helium</span></p>
        <p><span>1.5%</span><span>methane</span></p>
        <p><span>0.019%</span><span>hydrogen deuteride</span></p>
        <p><span>0.00015%</span><span>ethane</span></p>
        <p><span>0.00005%</span><span>carbon monoxide</span></p>
        <p>Trace amounts of carbonyl sulfide, hydrogen chloride, hydrogen fluoride</p>
    </div>
    <div></div>
    <p><span> </span></p>
    <img src="images/closeButton/neptune.png">
</div>

<div id="plutoBoard">
    <h2>Pluto</h2>

    <p><span>Diameter:</span>1,430 miles (2,301 km)</p>
    <p><span>Mass:</span>1.303×10^22 kg (0.00218 Earths)</p>
    <div>
        <h3>Composition by volume:</h3>
        <p>(Exact composition unknown to humans)</p>
        <p><span>??%</span><span>nitrogen</span></p>
        <p><span>??%</span><span>methane</span></p>
        <p><span>??%</span><span>carbon monoxide</span></p>
        <p><span>??%</span><span>argon</span></p>
        <p><span>??%</span><span>water vapour</span></p>
        <!--<p><span>??%</span><span>ethane</span></p>-->
        <p>Trace amounts of carbonyl sulfide, hydrogen chloride, hydrogen fluoride</p>
    </div>
    <div></div>
    <p><span> </span></p>
    <img src="images/closeButton/pluto.png">
</div>

<div id="mercuryText">
    <div>Snakes entwined on his staff protect</div>
    <div>Mercury, messenger of Roman gods</div>
    <div>The snakes entwined in Mercury’s symbol ☿</div>
    <div>—— To Mercury</div>
</div>
<div id="venusText">
    <div>Love and beauty, springtime and flowers</div>
    <div>The Roman goddess Venus ruled them all.</div>
    <div>What better than a hand mirror for her? ♀</div>
    <div>—— To Venus</div>
</div>
<div id="earthText">
    <div>Gaea, Earth goddess of the ancient Greeks,</div>
    <div>Was called Terra Mater - Earth Mother</div>
    <div>Greek sign for sphaira</div>
    <div>—— To Earth</div>
</div>
<div id="marsText">
    <div>Like a badge of blood in the sky,</div>
    <div>Red Planet has long stood for gods of war.</div>
    <div>Shield and spear form the planet’s symbol ♂</div>
    <div>—— To Mars</div>
</div>
<div id="jupiterText">
    <div>King of Roman gods: Jupiter,</div>
    <div>His is a fitting one for our largest planet.</div>
    <div>Sign for lightning bolt gives its symbol ♃</div>
    <div>—— To Jupiter</div>
</div>
<div id="saturnText">
    <div>Harvest time belonged to the god of reaping</div>
    <div>Whom the Romans called Saturn.</div>
    <div>Symbol like sickle represents the planet ♄</div>
    <div>—— To Saturn</div>
</div>
<div id="uranusText">
    <div>The seventh planet for old Roman god Uranus</div>
    <div>Father of Saturn and grandfather of Jupiter</div>
    <div>Symbol from a sign for the metal platinum ⛢</div>
    <div>—— To Uranus</div>
</div>
<div id="neptuneText">
    <div>An ocean god for an oea-colored planet</div>
    <div>Neptune, Roman god of the sea.</div>
    <div>Fishing spear, trident, for symbol ♆</div>
    <div>—— To Neptune</div>
</div>
<div id="plutoText">
    <div>Pluto rules the dark underworld of myth.</div>
    <div>The darkly lit outermost world bears his name.</div>
    <div>The “Pl” of Pluto is the planet’s symbol ♇</div>
    <div>—— To Pluto</div>
</div>

<div id="transition">
    <img src="images/galaxy/black.png">
    <img src="images/galaxy/black.png">

    <div>
        <p><span></span></p>
        <p><span></span></p>
        <p><span></span></p>
        <p><span></span></p>
    </div>
</div>

<div id="curtain"></div>

<footer id="timeLine">
    <div class="unchecked year">2008</div>
    <div class="unchecked year">2009</div>
    <div class="unchecked year">2010</div>
    <div class="unchecked year">2011</div>
    <div class="unchecked year">2012</div>
    <div class="unchecked year">2013</div>
    <div class="unchecked year">2014</div>
    <div class="unchecked year">2015</div>
    <div class="unchecked year">2016</div>
    <div class="unchecked year">2017</div>
    <div id="all" class="unchecked">All</div>
</footer>

</body>
</html>